<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="学生姓名" prop="versionName">
        <el-input
          v-model="queryParams.studentName"
          placeholder="请输入学生姓名"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="学生班级" prop="versionName">
        <el-input
          v-model="queryParams.className"
          placeholder="请输入学生班级"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="同步状态" prop="syncStatus">
        <el-select v-model="queryParams.syncStatus">
          <el-option value="1" label="已同步"></el-option>
          <el-option value="0" label="未同步"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button type="primary" @click="tongbu" :loading="loading">同步双方数据</el-button>
      <el-button type="primary" @click="batchCurdFaceSync(0)" :disabled="loadingAdd">同步所选</el-button>
      <el-button type="primary" @click="batchCurdFaceSync(1)" :disabled="loadingModify">更新所选</el-button>
      <el-button type="primary" @click="batchCurdFaceSync(2)" :disabled="loadingDel">删除所选</el-button>
    </el-row>

    <el-table v-loading="loading" :data="dataList"
              @selection-change="handleSelectionChange">
      >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
      <el-table-column type="index" label="序号" width="50"/>
      <el-table-column label="上游数据" align="center">
        <el-table-column label="上游学生编号" prop="phoneStudentId" align="center"/>
        <el-table-column label="上游学生姓名" prop="phoneStudentName" align="center"/>
      </el-table-column>

      <el-table-column label="下游数据" align="center">
        <el-table-column label="下游学生编号" prop="id" align="center"/>
        <el-table-column label="下游学生姓名" prop="studentName" align="center"/>
        <el-table-column label="下游学生班级" prop="className" align="center"/>
        <el-table-column label="下游学生照片" prop="studentPicture" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.studentPicture"
                      style="width: 50px; height: 50px"
                      :src="imgPath + scope.row.studentPicture"
                      :preview-src-list="[imgPath + scope.row.studentPicture]">
            </el-image>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="同步状态" prop="syncStatus" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.syncStatus==1" type="success">已同步</el-tag>
          <el-tag v-else type="info">未同步</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="同步学生人脸照片" placement="top">
            <el-button v-if="scope.row.syncStatus!=1 && scope.row.id != null"
                       size="mini"
                       circle
                       type="success"
                       icon="el-icon-finished"
                       @click="handleSumit(scope.row)"
            />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="更新学生人脸照片" placement="top"
                      v-if="scope.row.syncStatus==1">
            <el-button
              size="mini"
              circle

              icon="el-icon-refresh-left"
              @click="handleUpdate(scope.row)"
            />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除同步照片" placement="top" v-if="scope.row.syncStatus==1">
            <el-button
              size="mini"
              circle
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            />
          </el-tooltip>


        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script>
import {
  pageList,
  operationFaceSync,
  updateFaceSync,
  deleteFaceSync,
  batchCurdFaceSync,
  synchronous
} from "@/api/publicPhone/faceSync";
import fa from "element-ui/src/locale/lang/fa";


export default {
  name: "faceSync",

  data() {
    return {

      // 遮罩层
      loading: false,
      // 同步按钮
      loadingAdd: false,
      loadingModify: false,
      loadingDel: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //打开对话框
      dialogVisible: false,
      //表格数据
      dataList: {},
      //班级信息
      classList: [],
      //学生信息
      studentList: [],
      fileList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        versionName: undefined,
      },
      formData: {},
      //图片路径
      imgPath: process.env.VUE_APP_BASE_API + '/student/picture/',
      multipleSelection: []  // 全选,
    };
  },

  created() {
    this.getList();
  },

  methods: {

    tongbu() {
      this.loading = true;
      synchronous().then(() => {
        this.$message.success('成功')
        this.loading = false;
        this.getList();
      })
    },

    // 批量
    batchCurdFaceSync(type) {
      batchCurdFaceSync(this.multipleSelection, type).then(res => {
        this.$message({message: "批量成功", type: "success"});
        this.getList();
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;

      // 对批量按钮进行不可用操作
      let ids = this.multipleSelection.map(item => item.id);
      if ((ids.indexOf(null) !== -1)) {
        this.loadingAdd = true;
        this.loadingModify = true;
        this.loadingDel = true;
      } else {
        this.loadingAdd = false;
        this.loadingModify = false;
        this.loadingDel = false;
      }

      let syncStatusList = this.multipleSelection.map(item => item.syncStatus);
      if (syncStatusList.indexOf('0') !== -1) {
        this.loadingModify = true;
        this.loadingDel = true;
      } else {
        this.loadingModify = false;
        this.loadingDel = false;
      }
      if (syncStatusList.indexOf('1') !== -1) {
        this.loadingAdd = true;
      } else {
        this.loadingAdd = false;
      }
      console.log(this.multipleSelection)
    },

    getList() {
      this.loading = true;
      console.log(this.queryParams)
      pageList(this.queryParams)
        .then((response) => {
          this.dataList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },

    /** 重置表单 */
    reset() {
      this.appVersionForm = {
        appType: undefined,
        versionName: undefined,
        versionNo: undefined,
        downloadAddr: undefined,
        description: undefined,
      };
      this.resetForm("appVersionForm");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置查询 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery();
    },

    handleAdd() {
      this.dialogVisible = true;
      this.reset(this.formData);
      this.title = "编辑联系人信息";
    },

    /** 关闭弹窗 */
    handleClose(done) {
      this.dialogVisible = false;
    },

    handleSumit(row) {
      operationFaceSync(row).then((result) => {
        this.$message({message: "人脸信息同步成功", type: "success"});
        this.getList();
      });
    },
    handleUpdate(row) {
      updateFaceSync(row).then((result) => {
        this.$message({message: "人脸信息修改成功", type: "success"});
        this.getList();
      });
    },
    getClassName(list, id) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].id == id) {
          return list[i].className
        }
      }
    },
    getStudentName(list, studentId) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].studentId == studentId) {
          return list[i].name
        }
      }
    },
    /** 删除配置 */
    handleDelete(row) {
      deleteFaceSync(row).then((result) => {
        this.$message({message: "人脸同步信息删除成功", type: "success"});
        this.getList();
      });
    },
  },
};
</script>

<style>
</style>
